<template>
  <el-card shadow="never" class="border-0">
    <!-- 新增|刷新 -->
     <ListHeader @create="handleCreate" @refresh="getData"/>
   

    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="desc" label="角色描述" width="380" />

      <el-table-column  label="状态" width="120">
         <template #default="{row}">
          <el-switch :modelValue="row.status" 
          :active-value="1" 
          :inactive-value="0" 
          :loading="row.statusloading"
          :disable="row.super == 1"
          @change="handleStatusChange($event,row)"></el-switch>
         </template>
      </el-table-column>

      <el-table-column label="操作" width="250" align="center">
        <template #default="scope"> <!---声明作用域插槽，接收scope参数-->
          <el-button type="primary" size="small" text @click="openSetRule(scope.row)">权限配置</el-button>
          <el-button type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>

          <el-popconfirm title="是否要删除该公告?" confirm-button-text="确认" cancel-button-text="取消"
            @confirm="handleDelete(scope.row.id)">  <!---访问数据行的id-->
            <template #reference>
              <el-button text type="primary" size="small">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex items-center justify-center mt-5">
      <el-pagination background layout="prev,pager,next" :total="total" :current-page="currentPage" :page-size="limit"
        @current-change="getData" />
    </div>

    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="desc">
          <el-input v-model="form.desc" placeholder="角色描述" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="form.status" 
          :active-value="1" 
          :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
    </FormDrawer>

      <!--权限配置---> 
    <FormDrawer ref="setRuleFormDrawerRef" title="权限配置" @submit="handleSetRuleSubmit">
         <el-tree-v2  ref="elTreeRef" 
            node-key="id" 
            :check-strictly = "CheckStrictly"
            :default-expanded-keys="defaultExpandedKeys" 
            :data="ruleList"
            :props="{label:'name',children:'child'}"
            show-checkbox
            :height="treeHeight"
            @check="handleTreeCheck"
            >

            <template #default="{ node,data }">
              <div class="flex items-center">
                <el-tag :type="data.menu ? 'primary' : 'info'" size="small">
                  {{ data.menu ? "菜单" : "权限" }}
                </el-tag>
                <span class="ml-2 text-sm">{{ data.name }}</span>
              </div>
            </template>
          </el-tree-v2>
    </FormDrawer>


  </el-card>
</template>

<script setup>
import FormDrawer from '@/components/FormDrawer.vue'
import {
  getRoleList,
  createRole,
  updateRole,
  deleteRole,
  updateRoleStatus,
  setRoleRules
} from "@/api/role"
import {useInitTable,useInitForm} from "@/composables/useCommon"
import ListHeader from '@/components/ListHeader.vue'
import { ref } from 'vue'

import {getRuleList} from "@/api/rule"
import { toast } from '@/composables/util'


//二次封装列表，分页，搜索
const {
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    handleDelete,
    handleStatusChange
}  = useInitTable({
  getList:getRoleList,
  delete:deleteRole,
  updateStatus:updateRoleStatus
})




//二次封装的新增和修改
const {
    formDrawerRef,
    formRef,
    form,
    rules,
    drawerTitle,
    handleSubmit,
    handleCreate,
    handleEdit
} = useInitForm({
  form:{
    name: "",
    desc: "",
    status:1,
  },
  rules:{
  name: [{ //对应表单中prop="name"--关联验证规则
    required: true,
    message: "角色名称不能为空",
    trigger: "blur", //name为空则显示错误提示
  }]
},
  getData,
  update:updateRole,
  create:createRole
})


const setRuleFormDrawerRef = ref(null)
const ruleList = ref([])//要渲染的内容数据
const treeHeight = ref(0)//高度
const roleId = ref(0) //当前角色id
const defaultExpandedKeys = ref([])//默认展开的属性
const elTreeRef = ref(null)
const CheckStrictly = ref(false)//父子严格关联
//当前角色拥有的权限Id
const rulesId = ref([])
const openSetRule = (row)=>{
    roleId.value = row.id
    treeHeight.value = window.innerHeight - 180
    CheckStrictly.value = true //获取数据之前父子不关联
     
    getRuleList(1).then(res=>{
      ruleList.value = res.list
      //id为每个节点的唯一标识字段，defaultExpandedKeys是控制哪些节点默认展开
      defaultExpandedKeys.value = res.list.map(o=>o.id)  //res.list是树形数据的根节点
      setRuleFormDrawerRef.value.open()

      //获取当前角色拥有的权限Id
      rulesId.value = row.rules.map(o=>o.id)
      setTimeout(()=>{
        elTreeRef.value.setCheckedKeys(rulesId.value) //默认选中
        CheckStrictly.value = false //勾选的时候保证子节点被选中
      },150)
    })
}


const handleTreeCheck = (...e) =>{
  const {checkedKeys,halfCheckedKeys} =  e[1]
  //将权限id合并赋值
  rulesId.value = [...checkedKeys,...halfCheckedKeys]
}


const handleSetRuleSubmit = ()=>{
    setRuleFormDrawerRef.value.showloading()
    setRoleRules(roleId.value,rulesId.value)
    .then(res=>{
      toast("配置成功")
      getData()
      setRuleFormDrawerRef.value.close()
    })
    .finally(()=>{
    setRuleFormDrawerRef.value.hideloading()
    })
}




</script>